import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Card, Row, Col } from 'antd';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';
import st from '../Index.less';

@connect(({ problem }) => ({
  statistic: problem.typeCountStatistic,
}))
class ClassCountStatistic extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    this.queryData();
  }

  queryData() {
    const { dispatch } = this.props;
    dispatch({
      type: 'problem/fetchTypeCountStatistic',
    });
  }

  render() {
    const { statistic } = this.props;
    
    debugger
    let option1 =
      Object.keys(statistic).length > 0
        ? {
            color: ['#32c8cc'],
            title: {
              text: '市政养护问题类型统计',
            },
            grid: {
              left: '3%',
              right: '6%',
              bottom: '3%',
              containLabel: true,
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
              },
            },
            xAxis: {
              type: 'value',
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#666',
                }
                
              },
              axisTick: {
                show: false,
              },
              
            },
            yAxis: {
              type: 'category',
              data: statistic['municipal'].type,
              splitLine: { show: false },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#666',
                }
              },
              axisTick: {
                show: false,
              },
              offset: 10,
              nameTextStyle: {
                fontSize: 15,
              },
            },
            series: [
              {
                name: '数量',
                type: 'bar',
                data: statistic['municipal'].count,
                barWidth: 16,
                barGap: 10,
                smooth: true,
                label: {
                  normal: {
                    show: true,
                    position: 'right',
                    offset: [-3, 0],
                    textStyle: {
                      color: '#3977E6',
                      fontSize: 14,
                    },
                  },
                },
                itemStyle: {
                  emphasis: {
                      barBorderRadius: 7
                  },
                  normal: {
                      barBorderRadius: 7,
                      color: new echarts.graphic.LinearGradient(
                          0, 0, 1, 0,
                          [
                              {offset: 0, color: '#3977E6'},
                              {offset: 1, color: '#37BBF8'}

                          ]
                      )
                   }
              },
              },
            ],
          }
        : null;

    let option2 =
      Object.keys(statistic).length > 0
        ? {
            color: ['#24a5e8'],
            title: {
              text: '园林养护问题类型统计',
            },
            grid: {
              left: '3%',
              right: '6%',
              bottom: '3%',
              containLabel: true,
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
              },
            },
            xAxis: {
              type: 'value',
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#666',
                }
              },
              axisTick: {
                show: false,
              },
            },
            yAxis: {
              type: 'category',
              data: statistic['landspace'].type,
              splitLine: { show: false },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#666',
                }
              },
              axisTick: {
                show: false,
              },
              offset: 10,
              nameTextStyle: {
                fontSize: 15,
              },
            },
            series: [
              {
                name: '数量',
                type: 'bar',
                data: statistic['landspace'].count,
                barWidth: 16,
                barGap: 10,
                smooth: true,
                label: {
                  normal: {
                    show: true,
                    position: 'right',
                    offset: [-3, 0],
                    textStyle: {
                      color: '#009b50',
                      fontSize: 14,
                    },
                  },
                },
                itemStyle: {
                  emphasis: {
                      barBorderRadius: 7
                  },
                  normal: {
                      barBorderRadius: 7,
                      color: new echarts.graphic.LinearGradient(
                          0, 0, 1, 0,
                          [
                              {offset: 0, color: '#0cce70'},
                              {offset: 1, color: '#0ddcfb'}

                          ]
                      )
                   }
              },
              },
            ],
          }
        : null;
    return (
      <Card
      className={st.wtsb}
        title={<span className={st.cardTitle}>年度问题上报统计</span>}
      >
        {Object.keys(statistic).length > 0 && (
          <Row gutter={24}>
            <Col span={12} style={{paddingLeft:6,paddingRight:6}}>
              <div className={st.wtsbchart}>
                <ReactEcharts style={{ height: '100%' }} option={option1} />
              </div>
            </Col>
            <Col span={12} style={{paddingLeft:0,paddingRight:6}}>
              <div className={st.wtsbchart}>
                <ReactEcharts style={{ height: '100%' }} option={option2} />
              </div>
            </Col>
          </Row>
        )}
      </Card>
    );
  }
}

export default ClassCountStatistic;
